import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Checkbox, Form, Input, message } from 'antd';
import axios from "./../utils/axios"
import "./../css/Login.css"
const Login = () => {
  const navigate = useNavigate();  //用这个函数来在React应用中导航到不同的路由
  const onFinish = async (values) => {
    try {
      let res = await axios.post("/users/login", values);
      if (res.data.code == 0) {
        navigate("/home/welcome");
      } else {
        message.info(res.data.message);
      }
    } catch (err) {
      message.error("服务器出错，请联系管理员");
      console.log("err", err);
    }

  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="login-background">
      <Form
        className='login'
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
           <div className="button-group2">
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button type="primary" onClick={() => navigate("/register")}>
              注册
            </Button>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;